<!-- <template>
    <div class="login_wrap">
        <div class="inner">
            <h1>登录</h1>

            <el-tabs v-model="activeName">
                <el-tab-pane label="用户名密码登录" name="用户名密码登录">
                    <el-form label-width="100px" :model="myform">
                        <el-form-item prop="username" label="用户名">
                            <el-input v-model="myform.username"></el-input>
                        </el-form-item>
                        <el-form-item prop="password" label="密码">
                            <el-input type="password" v-model="myform.password"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success" @click="loginBtn">登录</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="短信登录" name="短信登录">
                    <el-form label-width="100px" :model="myform2">
                        <el-form-item prop="mobile" label="手机号码">
                            <el-input v-model="myform2.mobile"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button :disabled="countdown != 0" @click="fasongyzm">
                                {{ 
                                    countdown == 0
                                    ?
                                    '发送验证码'
                                    :
                                    `（${countdown}秒后重新发送）`    
                                }}
                            </el-button>
                        </el-form-item>
                        

                        <el-form-item prop="yzm" label="验证码">
                            <el-input v-model="myform2.yzm"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button>确定</el-button>
                        </el-form-item>
                    </el-form>

                </el-tab-pane>

            </el-tabs>


        </div>
    </div>
</template>

<script>
import { login } from '@/api/login';
export default {
    data() {
        return {
            myform: {
                username: '',
                password: ''
            },
            myform2: {
                mobile: '',
                yzm: ''
            },
            activeName: '短信登录',
            countdown: 0,
            timer: null
        }
    },
    methods: {
        async fasongyzm() {
            // 发送验证码，省略，阿里云没有配好
            // await fsyzm({
            //     tel: this.myform2.mobile
            // });
            this.countdown = 10;
            this.timer = setInterval(() => {
                this.countdown --; 
                if (this.countdown == 0) {
                    clearInterval(this.timer);
                }
            }, 1000);
        },
        async loginBtn() {
            // 创建虚拟表单
            const fd = new FormData();

            // 追加
            fd.append('username', this.myform.username);
            fd.append('password', this.myform.password);

            const res = await login(fd);

            // 如果登录成功，在vuex中存token，vuex是有本地存储的
            if (res.status == 'success') {
                this.$message.success(res.info);
                // 存token
                this.$store.commit('setToken', res.token);
                // 跳转到首页
                this.$router.push({
                    name: '首页'
                });

            } else {
                // 登录没有成功
                this.$message.error(res.info);
            }
        }
    },
}
</script>

<style lang="less" scoped>
.login_wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: -webkit-linear-gradient(top left, rgb(44, 124, 177), rgb(6, 37, 99));

    .inner {
        position: absolute;
        width: 600px;
        height: 400px;
        background: white;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
    }
}
</style> -->